/**
 * @description 折线图 多 
 */

import echarts from "../echart"
import { useEffect, useRef } from 'react';
import useChartResize from "@/hooks/useChartResize";
import { getLinesMock } from "../mockData";

function Lines({ configData, chart }) {
  let { title } = configData

  const chartRef = useRef(null)
  const boxRef = useRef(null)



  useEffect(() => {
    let themeConfig = chart.line
    let limitNum = chart.base.lineNum
    // 基于准备好的dom，初始化echarts实例
    if (!chartRef.current) {
      let myChart = echarts.init(boxRef.current)
      chartRef.current = myChart
    }


    let { subNameList, xAxisData, yAxisDatas } = getLinesMock(limitNum)

    let series = subNameList.map((data, index) => {
      return {
        ...themeConfig.series,
        data: yAxisDatas[index],
        type: 'line',
        name: subNameList[index]
      }
    })


    const options = {
      backgroundColor: themeConfig.backgroundColor,
      color: themeConfig.color,
      title: {
        ...themeConfig.title,
        text: title,
      },
      // 图例组件
      legend: {
        data: subNameList,
        ...themeConfig.legend
      },
      // 直角坐标系内绘图网格
      grid: themeConfig.grid,
      // 提示框组件
      tooltip: {
        trigger: 'axis',
        ...themeConfig.tooltip
      },
      // x轴
      xAxis: {
        ...themeConfig.xAxis,
        type: 'category',
        boundaryGap: false,
        data: xAxisData
      },
      // y轴
      yAxis: {
        ...themeConfig.yAxis,
        type: 'value'
      },
      series,
    }


    // 绘制图表
    chartRef.current.setOption(options, true);

  }, [chart])

  useChartResize(boxRef, chartRef)

  return (
    <div className='chart-box' ref={boxRef} ></div>
  )
}

export default Lines